<template>
	<view>
		<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
			<view>{{ date }}</view>
		</picker>
	</view>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const getDate = (type: 'start' | 'end' | 'format') => {
  const date = new Date();

  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();

  if (type === 'start') {
    year = year - 100;
  } else if (type === 'end') {
    year = year + 100;
  }
  month = month > 9 ? month : '0' + month;
  day = day > 9 ? day : '0' + day;

  return `${year}-${month}-${day}`;
};

const date = ref(getDate('format'));
const startDate = ref(getDate('start'));
const endDate = ref(getDate('end'));

const bindDateChange = (e: { detail: { value: string } }) => {
  date.value = e.detail.value;
  console.log(date.value)
};
</script>

<style>

</style>


